<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STM32硬件控制面板</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios@1.6.0/dist/axios.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh; padding: 20px;
        }
        .dashboard {
            max-width: 1200px; margin: 0 auto;
            display: grid; gap: 20px;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
        .card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px; padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease;
        }
        .card:hover { transform: translateY(-5px); }
        .card-header {
            font-size: 1.4em; color: #4a5568;
            margin-bottom: 20px; padding-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
        }
        .status-item {
            display: flex; justify-content: space-between;
            margin: 12px 0; padding: 8px 0;
            border-bottom: 1px solid #f7fafc;
        }
        .led-control {
            text-align: center; padding: 20px;
        }
        .led-indicator {
            width: 80px; height: 80px; margin: 0 auto 20px;
            border-radius: 50%; border: 3px solid #4a5568;
            transition: all 0.3s ease;
        }
        .led-on { background: #48bb78; box-shadow: 0 0 20px #48bb78; }
        .led-off { background: #cbd5e0; }
        .toggle-btn {
            background: #4299e1; color: white;
            border: none; padding: 12px 30px;
            border-radius: 25px; font-size: 1.1em;
            cursor: pointer; transition: all 0.3s ease;
        }
        .toggle-btn:hover { background: #3182ce; transform: scale(1.05); }
        .toggle-btn:active { transform: scale(0.95); }
        .sensor-grid {
            display: grid; gap: 15px;
            grid-template-columns: repeat(2, 1fr);
        }
        .sensor-value {
            font-size: 1.8em; font-weight: bold;
            color: #2d3748;
        }
        .gauge {
            height: 120px; position: relative;
            background: #f7fafc; border-radius: 10px;
            overflow: hidden; margin: 10px 0;
        }
        .gauge-fill {
            height: 100%; background: linear-gradient(90deg, #48bb78, #4299e1);
            transition: width 0.5s ease;
        }
        .log-list {
            max-height: 200px; overflow-y: auto;
            background: #f7fafc; padding: 10px;
            border-radius: 5px; font-family: monospace;
        }
        .log-entry { 
            padding: 5px 0; border-bottom: 1px solid #e2e8f0;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="dashboard">
            <!-- 设备信息卡片 -->
            <div class="card">
                <h2 class="card-header">📊 设备状态监控</h2>
                <div class="status-item">
                    <span>运行时间:</span>
                    <span>{{ deviceInfo.uptime }}</span>
                </div>
                <div class="status-item">
                    <span>内存使用:</span>
                    <span>{{ deviceInfo.memoryUsage }} MB / {{ deviceInfo.totalMemory }} MB</span>
                </div>
                <div class="gauge">
                    <div class="gauge-fill" :style="{width: memoryUsagePercent + '%'}"></div>
                </div>
                <div class="status-item">
                    <span>CPU负载:</span>
                    <span>{{ deviceInfo.cpuLoad }}%</span>
                </div>
                <div class="status-item">
                    <span>网络状态:</span>
                    <span :style="{color: deviceInfo.networkStatus === 'Connected' ? '#48bb78' : '#e53e3e'}">
                        {{ deviceInfo.networkStatus }}
                    </span>
                </div>
            </div>

            <!-- LED控制卡片 -->
            <div class="card">
                <div class="led-control">
                    <h2 class="card-header">💡 LED控制面板</h2>
                    <div class="led-indicator" :class="ledState ? 'led-on' : 'led-off'"></div>
                    <button @click="toggleLED" class="toggle-btn" :disabled="loading">
                        {{ loading ? '切换中...' : (ledState ? '关闭LED' : '开启LED') }}
                    </button>
                    <p style="margin-top: 15px; color: #718096;">
                        点击次数: {{ ledClickCount }}
                    </p>
                </div>
            </div>

            <!-- 传感器数据卡片 -->
            <div class="card">
                <h2 class="card-header">🌡️ 传感器数据</h2>
                <div class="sensor-grid">
                    <div>
                        <div>温度</div>
                        <div class="sensor-value">{{ sensorData.temperature }}°C</div>
                    </div>
                    <div>
                        <div>湿度</div>
                        <div class="sensor-value">{{ sensorData.humidity }}%</div>
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <button @click="readSensors" class="toggle-btn" style="background: #38a169;">
                        刷新传感器数据
                    </button>
                </div>
            </div>

            <!-- 系统日志卡片 -->
            <div class="card">
                <h2 class="card-header">📋 操作日志</h2>
                <div class="log-list">
                    <div v-for="(log, index) in operationLogs" :key="index" class="log-entry">
                        [{{ log.timestamp }}] {{ log.message }}
                    </div>
                </div>
                <button @click="clearLogs" class="toggle-btn" style="background: #e53e3e; margin-top: 10px;">
                    清空日志
                </button>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    deviceInfo: {
                        uptime: '0h 0m 0s',
                        memoryUsage: 0,
                        totalMemory: 64,
                        cpuLoad: 0,
                        networkStatus: 'Disconnected'
                    },
                    ledState: false,
                    ledClickCount: 0,
                    sensorData: {
                        temperature: 0,
                        humidity: 0
                    },
                    operationLogs: [],
                    loading: false,
                    apiBaseUrl: window.location.origin // 根据实际部署地址调整
                }
            },
            computed: {
                memoryUsagePercent() {
                    return ((this.deviceInfo.memoryUsage / this.deviceInfo.totalMemory) * 100).toFixed(1);
                }
            },
            mounted() {
                this.initializeApp();
                // 每5秒更新一次设备状态
                setInterval(() => this.updateDeviceInfo(), 5000);
            },
            methods: {
                async initializeApp() {
                    this.addLog('应用初始化完成');
                    await this.updateDeviceInfo();
                    await this.readSensors();
                },
                
                async updateDeviceInfo() {
                    try {
                        const response = await axios.get(`${this.apiBaseUrl}/api/device/info`);
                        this.deviceInfo = { ...this.deviceInfo, ...response.data };
                    } catch (error) {
                        console.error('获取设备信息失败:', error);
                        this.addLog('获取设备信息失败');
                    }
                },
                
                async toggleLED() {
                    this.loading = true;
                    try {
                        const response = await axios.post(`${this.apiBaseUrl}/api/led/toggle`);
                        this.ledState = response.data.ledState;
                        this.ledClickCount++;
                        this.addLog(`LED状态切换: ${this.ledState ? '开启' : '关闭'}`);
                    } catch (error) {
                        console.error('控制LED失败:', error);
                        this.addLog('LED控制失败');
                    } finally {
                        this.loading = false;
                    }
                },
                
                async readSensors() {
                    try {
                        const response = await axios.get(`${this.apiBaseUrl}/api/sensors`);
                        this.sensorData = response.data;
                        this.addLog('传感器数据更新完成');
                    } catch (error) {
                        console.error('读取传感器失败:', error);
                        this.addLog('读取传感器数据失败');
                    }
                },
                
                addLog(message) {
                    const timestamp = new Date().toLocaleTimeString();
                    this.operationLogs.unshift({ timestamp, message });
                    if (this.operationLogs.length > 20) {
                        this.operationLogs = this.operationLogs.slice(0, 20);
                    }
                },
                
                clearLogs() {
                    this.operationLogs = [];
                    this.addLog('日志已清空');
                }
            }
        }).mount('#app');
    </script>
</body>
</html>